<html>
<head>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <script src="jquery.js"></script>
  <script>  
    var locale = chrome.i18n.getMessage; // Short-hand

    var waiting = false;

    function requestList(now){
        clearRows("list", 1);
        clearRows("msgList", 1);
        $("#list").append("<tr><th colspan='2'><img src='ajax-loader.gif'></img></td></tr>");
        $("#msgList").append("<tr><th colspan='3'><img src='ajax-loader.gif'></img></th></tr>");
        if(!now)
          now = false;
        chrome.extension.sendRequest({type: "friendsList",now:now}, function(response) {
          if(response.ok){
                responseRecieved(response);
          }
          else
              waiting = true;
        });
    }
    function clearRows(id, remaining){
        var elem = document.getElementById(id);
        while(elem.rows.length > remaining){
           elem.deleteRow(remaining);
        }
    }


    chrome.extension.onRequest.addListener(
        function(request, sender, sendResponse) {
            if(waiting && request.type=="waitingList"){
                responseRecieved(request);
                waiting = false;
            }
            sendResponse();
    });
 
    function responseRecieved(data){
        document.getElementById("list").deleteRow(1);
        document.getElementById("msgList").deleteRow(1);
        $("#list").append(data.list);
        $("#msgList").append(data.msgList);
        refreshUI();
    }

    $(document).ready(function (){

      // --Localization--
      $("a[id='myXboxLink']").html(locale("myXbox"));
      $("a[id='friendsLink']").html(locale("friends"));
      $("a[id='messagesLink']").html(locale("msgs"));

      $("#list").html("<tr><th>" + locale("gTag") + "</th><th>" + locale("info_short") + "</th></tr>");
      $("#msgList").html("<tr><th colspan='2' >" + locale("gTag") + "</th><th>" + locale("msg") + "</th></tr>");
      refreshUI();
      requestList();
    });


    function refreshUI(){
        $("a").each(function (){
            if(this.href.indexOf("chrome.tabs") < 0 && this.href.indexOf("javascript:") < 0)
                this.href = "javascript:chrome.tabs.create({url:\"" + this.href + "\"})"
        });
        $("#list tr:odd").css("background-color", "#eeeeec");
	$("#msgList tr:nth-child(4n+2)").css("background-color", "#eeeeec");
    }

    function openMsg(id,obj){
        
        var msgBody = $(obj).parent().parent().next();
        if(msgBody.text().length <= 0){
            $(obj).parent().parent().find(".loadingMsg").toggle();
            msgBody.load("http://live.xbox.com/profile/MessageCenter/ViewMessage.aspx?mx=" + id + " .XbcMessageTextPanel",function(){
                $(this).prev().find(".loadingMsg").toggle();
                $("#msgList").find(".msgBody:visible").toggle();
                $(this).html("<td colspan='3'>" + $(this).text() + "</td>");
                $(this).toggle();
            });
        }
        else
          msgBody.toggle();
    }

    function toggleDisplay(show, sender){
        $(".tabHead a").not(sender).attr("class", "tabHeadNotSelected");
        $(sender).attr("class", "tabHeadSelected");
        $(".tableCont div:visible").not($("#" + show).parent()).slideToggle();
        $(".tableCont div:hidden").filter($("#" + show).parent()).slideToggle();
    }

    function onlineOver(obj){
      obj = $(obj);
      var temp = obj.attr("title");
      obj.attr("title", obj.text());
      obj.html(temp);
    }
    function onlineOut(obj){
      onlineOver(obj);
    }
  </script>
</head>
<body>
<div id="drop" style="display:none;visibility:hidden;"></div>
<div id="content">
    <div align="center" id="topLinks"><a href="http://live.xbox.com/default.aspx" id="myXboxLink">My Xbox</a> - <a id="friendsLink" href="http://live.xbox.com/profile/Friends.aspx">Friends</a> - <a id="messagesLink" href="http://live.xbox.com/profile/MessageCenter/ViewMessages.aspx">Messages</a></div>
    <div>
        <div class="tabHead">
            <a href='javascript:;' id="friendsLink" class="tabHeadSelected" onclick="toggleDisplay('list', this);">Friends</a>
            <a href='javascript:;' id="messagesLink" class="tabHeadNotSelected" onclick="toggleDisplay('msgList', this);">Messages</a>
        </div>
        <div class="tableCont">
            <div>
                <table id="list"></table>
            </div>
            <div style="display:none;">
                <table id="msgList"></table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
